<script setup>
defineProps({
    headImgUrl: {
        type: String,
        default: '',
    },
    targetId: {
        type: String,
        default: '',
    },
    username: {
        type: String,
        default: 'username',
    },
    message: {
        type: String,
        default: 'message',
    },
    isOnline: {
        type: Boolean,
        default: false,
    },
})
</script>

<template>
    <div
        style="
            position: relative;
            height: 80px;
            width: 100%;
            border-bottom: 1px solid var(--el-border-color);
            display: flex;
        "
    >
        <img :src="headImgUrl"  alt=""/>
        <div>
            <div style="font-size: 20px; margin-top: 8px; height: 32px">{{ username }}</div>
            <div>{{ message }}</div>
        </div>
    </div>
</template>

<style scoped>
img {
    width: 62px;
    height: 62px;
    margin: 9px;
    border-radius: 12px;
}
</style>
